﻿<%@ Page Language="C#" MasterPageFile="~/Templates/Member.master" AutoEventWireup="true" CodeFile="Profile.aspx.cs" Inherits="Member_Profile" Title="Untitled Page" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
<%@ Register Assembly="Jalal.Library" TagPrefix="ucc" Namespace="Jalal.Library.Web.Control" %>
<%@ Register Src="~/Controls/wucUserProfileMenu.ascx" TagName="UserProfileMenu" TagPrefix="wuc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="../Javascripts/JQuery/themes/darkness/ui.all.css" rel="stylesheet"
        type="text/css" />
    <link href="../Javascripts/JQuery/themes/darkness/ui.dialog.css" rel="stylesheet"
        type="text/css" />
    <script src="../Javascripts/JQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../Javascripts/JQuery/ui/ui.core.js" type="text/javascript"></script>
    <script src="../Javascripts/JQuery/ui/ui.datepicker.js" type="text/javascript"></script>

    <script src="../Javascripts/JQuery/ui/ui.draggable.js" type="text/javascript"></script>

    <script src="../Javascripts/JQuery/ui/ui.resizable.js" type="text/javascript"></script>
    <script src="../Javascripts/JQuery/ui/ui.dialog.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MiddleContent" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <table border="0" width="100%">
        <tr>
            <td colspan="2">
                <ucc:ResponseMessage runat="server" ID="uccResponse" ></ucc:ResponseMessage>
            </td>
        </tr>
        <tr>
            <td valign="top" width="270px">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="profile-image-box"><asp:Image ID="imgProfileImage" runat="server" Width="250px" /></td>
                    </tr>
                    <tr>
                        <td align="right">
                            <asp:Button  runat="server" ID="btnProfileImageUpload" CssClass="profile-upload-button" Text="Upload" />
                        </td>
                    </tr>
                    <tr>
                        <td class="large-label" colspan="2">Favorite Games</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:TextBox ID="tbxFavoriteGames" runat="server" TextMode="MultiLine" Rows="4" Columns="30" CssClass="profile-textarea"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="large-label" colspan="2">About Me</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:TextBox ID="tbxAboutMe" runat="server" TextMode="MultiLine" Rows="8" Columns="30" CssClass="profile-textarea"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top" align="left">
                <table border="0" cellpadding="5" cellspacing="5">
                    <tr>
                        <td colspan="3" class="large-label">
                            Member # <asp:Label ID="lblMemberId" runat="server" CssClass="member-id"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" class="large-label">
                            Username: <asp:Label ID="lblUsername" runat="server" CssClass="user-name" ></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            Real Name
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxRealName" runat="server"  CssClass="profile-textbox"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            Nick Name
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxNickName" runat="server"  CssClass="profile-textbox" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            Date of Birth
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxDateOfBirth" runat="server"  CssClass="profile-textbox" Width="100px" 
                            MaxLength="10"></asp:TextBox>&nbsp;(dd/mm/yyyy)
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            IM
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxMessenger" runat="server"  CssClass="profile-textbox" Width="170px" MaxLength="100"></asp:TextBox>
                            &nbsp;(i.e. sample@domain.com)
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label" valign="baseline">
                            Facebook&nbsp;Url
                        </td>
                        <td  valign="baseline"> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxFacebookProfile" runat="server"  CssClass="profile-textbox"></asp:TextBox>
                            <br />(i.e. www.facebook.com/my.name)
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            City
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxCity" runat="server"  CssClass="profile-textbox" Width="100px" MaxLength="50"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" class="large-label">
                            Preference 
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            Mood
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:TextBox ID="tbxMode" runat="server"  CssClass="profile-textbox"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">
                            Player style
                        </td>
                        <td> : </td>
                        <td align="left">
                            <asp:DropDownList ID="ddlPlayerStyle" runat="server" CssClass="game-style-dropdown">
                                <asp:ListItem Text="Rpg" Value="1"></asp:ListItem>
                                <asp:ListItem Text="Strategy" Value="2"></asp:ListItem>
                                <asp:ListItem Text="Racing" Value="3"></asp:ListItem>
                                <asp:ListItem Text="Shooter" Value="4"></asp:ListItem>
                                <asp:ListItem Text="Sports" Value="5"></asp:ListItem>
                                <asp:ListItem Text="Simulation" Value="6"></asp:ListItem>
                                <asp:ListItem Text="Other" Value="7"></asp:ListItem>
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td class="small-label">Element</td>
                        <td> : </td>
                        <td align="left" colspan="3">
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td rowspan="2">
                                                    <asp:RadioButton runat="server" ID="rbtFire" GroupName="Element" />
                                                </td>
                                                <td>
                                                    <ucc:ThemeImage ImageAlign="AbsMiddle" runat="server" ImageUrl="Fire.jpg" AlternateText="Fire" ToolTip="Fire" Width="30px" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" class="fire-color">Fire</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td rowspan="2">
                                                    <asp:RadioButton runat="server" ID="rbtWater" GroupName="Element" />
                                                </td>
                                                <td>
                                                    <ucc:ThemeImage ImageAlign="AbsMiddle" runat="server" ImageUrl="Water.jpg" AlternateText="Water" ToolTip="Water" Width="30px"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" class="water-color">Water</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td rowspan="2">
                                                    <asp:RadioButton runat="server" ID="rbtWind" GroupName="Element" />
                                                </td>
                                                <td>
                                                    <ucc:ThemeImage ImageAlign="AbsMiddle" runat="server" ImageUrl="Wind.jpg" AlternateText="Wind" ToolTip="Wind" Width="30px"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" class="wind-color">Wind</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td rowspan="2">
                                                    <asp:RadioButton runat="server" ID="rbtEarth" GroupName="Element" />
                                                </td>
                                                <td>
                                                    <ucc:ThemeImage ImageAlign="AbsMiddle" runat="server" ImageUrl="Earth.jpg" AlternateText="Earth" ToolTip="Earth" Width="30px"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" class="earth-color">Earth</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td rowspan="2">
                                                    <asp:RadioButton runat="server" ID="rbtLife" GroupName="Element" />
                                                </td>
                                                <td>
                                                    <ucc:ThemeImage ImageAlign="AbsMiddle" runat="server" ImageUrl="Life.jpg" AlternateText="Life" ToolTip="Life" Width="30px"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" class="life-color">Life</td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td rowspan="2">
                                                    <asp:RadioButton runat="server" ID="rbtSpirit" GroupName="Element" />
                                                </td>
                                                <td>
                                                    <ucc:ThemeImage ImageAlign="AbsMiddle" runat="server" ImageUrl="Spirit.jpg" AlternateText="Spirit" ToolTip="Spirit" Width="30px"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" class="spirit-color">Spirit</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" class="large-label">
                            Avatar 
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table>
                                <tr>
                                     <td colspan="1">
                                        <asp:Image ID="imgAvatar" runat="server" Width="100px" BorderColor="Black" BorderStyle="Solid" BorderWidth="5px" />
                                    </td>
                                    <td valign="top">
                                        <input type="button" class="profile-upload-button" value="Upload" onclick='showAvatarImagePopup()' />
                                    </td>
                                    <td style="padding:25px;">
                                        If you choose to show a custom avatar instead showing your profile image in the public posts (i.e. forum)
                                        than you have to select the Use Avatar option.
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <asp:RadioButtonList ID="rblImageSelection" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Text="Use Profile Image" Value="True"></asp:ListItem>
                                <asp:ListItem Text="Use Avatar" Value="False"></asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">
                            <ucc:ThemeImageButton runat="server" ImageUrl="profile_save_btn.jpg" OnClick="Save_Click" />
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top" align="right">
                <wuc:UserProfileMenu runat="server" />
            </td>
        </tr>
    </table>
    <act:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
        TargetControlID="btnProfileImageUpload"
        PopupControlID="pnlProfileImagePopup"
        BackgroundCssClass="modalBackground" 
        DropShadow="false" 
        OkControlID="btnOkProfileImageUpload" 
        CancelControlID="btnCancelProfileImageUpload" 
        PopupDragHandleControlID="pnlPopupTitle"
        RepositionMode="RepositionOnWindowResizeAndScroll">
    </act:ModalPopupExtender>
    <asp:Panel ID="pnlProfileImagePopup" runat="server" CssClass="image_upload_popup">
        <table class="image_upload_area">
            <tr>
                <td>
                    <asp:Panel ID="pnlPopupTitle" runat="server" CssClass="drag_header">Upload Profile Image</asp:Panel>
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td colspan="2">
                                <p>Please browse your profile image and upload. Your profile image will show up after it has been verified by the admin.</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><ucc:ImageUploader ID="uccProfileImageUploader" runat="server" UploadFolder="~/Upload/Image/" TempFolder="~/Upload/Temp/" /></td>
                        </tr>
                        <tr>
                            <td align="left">
                                <asp:Button ID="btnCancelProfileImageUpload" runat="server" Text="Cancel" CssClass="profile-upload-button"/>
                                &nbsp;
                                <asp:Button ID="btnOkProfileImageUpload" OnClick="UploadProfileImage" runat="server" Text="Upload" CssClass="profile-upload-button"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </asp:Panel>
    
<%--    <div id="avatarImagePopup" title="Upload Avatar Image">
        Please browse your avatar image and upload. Your avatar image will show up after it has been verified by the admin.
        <input type="button" id="btnAvatarImageUpload" onclick="alert('hi')" value="Upload" />
    </div>--%>
    <script type="text/javascript">
        // Datepicker for birth day
	    $(function() {
		    $("#<%= tbxDateOfBirth.ClientID %>").datepicker({changeMonth:true,changeYear:true});
	    });
	    
//	    //modal popup for profile image
//	    $('#profileImagePopup').dialog({ bgiframe: true,modal: true ,autoOpen: false});
//	    function showProfileImagePopup()
//	    {
//		    $('#profileImagePopup').dialog( 'open' );
//		    return false;
//	    }
//	    
//	    //modal popup for profile image
//	    $('#avatarImagePopup').dialog({ bgiframe: true,modal: true ,autoOpen: false});
//	    function showAvatarImagePopup()
//	    {
//	        $('#avatarImagePopup').dialog( 'open' );
//		    return false;
//	    }
	    
	</script>


</asp:Content>

